<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        *{
            margin: 0;
            padding: 0;
            list-style: none;
            border:none
        }

        #aside{
            width: 150px;
            position: absolute;
            left: 0;
            top: 150px;
        }

        #aside img{
            width: 100%;
        }

        p{
            height: 50px;
            text-align: center;
            font-size: 20px;
        }
    </style>
</head>
<body>
    <div id="aside">
        <img src="images/float.jpg" alt="">
    </div>

    <p>上课要好好听课!下课要好好复习!不要打游戏!</p>
    <p>上课要好好听课!下课要好好复习!不要打游戏!</p>
    <p>上课要好好听课!下课要好好复习!不要打游戏!</p>
    <p>上课要好好听课!下课要好好复习!不要打游戏!</p>
    <p>上课要好好听课!下课要好好复习!不要打游戏!</p>
    <p>上课要好好听课!下课要好好复习!不要打游戏!</p>
    <p>上课要好好听课!下课要好好复习!不要打游戏!</p>
    <p>上课要好好听课!下课要好好复习!不要打游戏!</p>
    <p>上课要好好听课!下课要好好复习!不要打游戏!</p>
    <p>上课要好好听课!下课要好好复习!不要打游戏!</p>
    <p>上课要好好听课!下课要好好复习!不要打游戏!</p>
    <p>上课要好好听课!下课要好好复习!不要打游戏!</p>
    <p>上课要好好听课!下课要好好复习!不要打游戏!</p>
    <p>上课要好好听课!下课要好好复习!不要打游戏!</p>
    <p>上课要好好听课!下课要好好复习!不要打游戏!</p>
    <p>上课要好好听课!下课要好好复习!不要打游戏!</p>
    <p>上课要好好听课!下课要好好复习!不要打游戏!</p>
    <p>上课要好好听课!下课要好好复习!不要打游戏!</p>
    <p>上课要好好听课!下课要好好复习!不要打游戏!</p>
    <p>上课要好好听课!下课要好好复习!不要打游戏!</p>
    <p>上课要好好听课!下课要好好复习!不要打游戏!</p>
    <p>上课要好好听课!下课要好好复习!不要打游戏!</p>
    <p>上课要好好听课!下课要好好复习!不要打游戏!</p>
    <p>上课要好好听课!下课要好好复习!不要打游戏!</p>
    <p>上课要好好听课!下课要好好复习!不要打游戏!</p>
    <p>上课要好好听课!下课要好好复习!不要打游戏!</p>
    <p>上课要好好听课!下课要好好复习!不要打游戏!</p>
    <p>上课要好好听课!下课要好好复习!不要打游戏!</p>
    <p>上课要好好听课!下课要好好复习!不要打游戏!</p>
    <p>上课要好好听课!下课要好好复习!不要打游戏!</p>
    <p>上课要好好听课!下课要好好复习!不要打游戏!</p>
    <p>上课要好好听课!下课要好好复习!不要打游戏!</p>
    <p>上课要好好听课!下课要好好复习!不要打游戏!</p>
    <p>上课要好好听课!下课要好好复习!不要打游戏!</p>
    <p>上课要好好听课!下课要好好复习!不要打游戏!</p>
    <p>上课要好好听课!下课要好好复习!不要打游戏!</p>
    <p>上课要好好听课!下课要好好复习!不要打游戏!</p>
    <p>上课要好好听课!下课要好好复习!不要打游戏!</p>
    <p>上课要好好听课!下课要好好复习!不要打游戏!</p>
    <p>上课要好好听课!下课要好好复习!不要打游戏!</p>
    <p>上课要好好听课!下课要好好复习!不要打游戏!</p>
    <p>上课要好好听课!下课要好好复习!不要打游戏!</p>
    <p>上课要好好听课!下课要好好复习!不要打游戏!</p>
    <p>上课要好好听课!下课要好好复习!不要打游戏!</p>
    <p>上课要好好听课!下课要好好复习!不要打游戏!</p>
    <p>上课要好好听课!下课要好好复习!不要打游戏!</p>
    <p>上课要好好听课!下课要好好复习!不要打游戏!</p>
    <p>上课要好好听课!下课要好好复习!不要打游戏!</p>
    <p>上课要好好听课!下课要好好复习!不要打游戏!</p>
    <p>上课要好好听课!下课要好好复习!不要打游戏!</p>
    <p>上课要好好听课!下课要好好复习!不要打游戏!</p>
    <p>上课要好好听课!下课要好好复习!不要打游戏!</p>
    <p>上课要好好听课!下课要好好复习!不要打游戏!</p>
    <p>上课要好好听课!下课要好好复习!不要打游戏!</p>
    <p>上课要好好听课!下课要好好复习!不要打游戏!</p>
    <p>上课要好好听课!下课要好好复习!不要打游戏!</p>
    <p>上课要好好听课!下课要好好复习!不要打游戏!</p>
    <p>上课要好好听课!下课要好好复习!不要打游戏!</p>
    <p>上课要好好听课!下课要好好复习!不要打游戏!</p>
    <p>上课要好好听课!下课要好好复习!不要打游戏!</p>
    <p>上课要好好听课!下课要好好复习!不要打游戏!</p>
    <p>上课要好好听课!下课要好好复习!不要打游戏!</p>
    <p>上课要好好听课!下课要好好复习!不要打游戏!</p>
    <p>上课要好好听课!下课要好好复习!不要打游戏!</p>
    <p>上课要好好听课!下课要好好复习!不要打游戏!</p>
    <p>上课要好好听课!下课要好好复习!不要打游戏!</p>
    <p>上课要好好听课!下课要好好复习!不要打游戏!</p>
    <p>上课要好好听课!下课要好好复习!不要打游戏!</p>
    <p>上课要好好听课!下课要好好复习!不要打游戏!</p>
    <p>上课要好好听课!下课要好好复习!不要打游戏!</p>
    <p>上课要好好听课!下课要好好复习!不要打游戏!</p>
    <p>上课要好好听课!下课要好好复习!不要打游戏!</p>
    <p>上课要好好听课!下课要好好复习!不要打游戏!</p>
    <p>上课要好好听课!下课要好好复习!不要打游戏!</p>
    <p>上课要好好听课!下课要好好复习!不要打游戏!</p>

<script src="js/myFunc.js"></script>
<script>
    window.onload = function () {
        // 1. 获取广告头部的高度
        var offset_top = $('aside').offsetTop;

        // 2. 监听窗口的滚动
        var begin = 0, end = 0, timer = null;
        window.onscroll = function () {
            // 2.0 清除定时器
            clearInterval(timer);

            // 2.1 获取滚动的高度
            var scroll_top = scroll().top;
            end = offset_top + scroll_top;

            // 2.2 缓动动画
            timer = setInterval(function () {
                 begin = begin + (end - begin) * 0.2;
                 $("aside").style.top = begin + "px";

                console.log(begin, end);
                // 清除定时器
                if(Math.round(begin) === end){
                    clearInterval(timer);
                }

            }, 20);
        }
    }
</script>
</body>
</html>